import {Component, Input, OnInit} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map';
import View from 'ol/View.js';
import KML from 'ol/format/KML.js';
import {Heatmap as HeatmapLayer, Tile as TileLayer} from 'ol/layer.js';
import Stamen from 'ol/source/Stamen.js';
import VectorSource from 'ol/source/Vector.js';
import XYZ from 'ol/source/XYZ';

@Component({
    selector: 'kylin-heatmap',
    templateUrl: './heatmap.component.html',
    styleUrls: ['./heatmap.component.less']
})
export class HeatmapComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //{
    radius = 5;
    blur = 15;
    raster: TileLayer;
    vector: HeatmapLayer;

    constructor() {
    }

    ngOnInit() {
        this.turnOn();
    }

    cancel(options?: any): any {
        this.turnOff();
    }

    turnOn() {

        this.vector = new HeatmapLayer({
            source: new VectorSource({
                url: './assets/data/heatmap/2012_Earthquakes_Mag5.kml',
                format: new KML({
                    extractStyles: false
                })
            }),
            /*blur: parseInt(this.blur, 10),
            radius: parseInt(this.radius, 10)*/
            blur: this.blur,
            radius: this.radius
        });

        this.vector.getSource().on('addfeature', (event) => {
            // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
            // standards-violating <magnitude> tag in each Placemark.  We extract it from
            // the Placemark's name instead.
            const name = event.feature.get('name');
            const magnitude = parseFloat(name.substr(2));
            event.feature.set('weight', magnitude - 5);
        });

        /*this.raster = new TileLayer({
            source: new Stamen({
                layer: 'toner'
            })
        });

        this.map.addLayer(this.raster);*/
        this.map.addLayer(this.vector);
    }

    turnOff() {
        // this.map.removeLayer(this.raster);
        this.map.removeLayer(this.vector);
    }

    setBlur() {
        this.vector.setBlur(this.blur);
    }

    setRadius() {
        this.vector.setRadius(this.radius);
    }

}
